<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../Vue学习/vue.js"></script>
</head>

<body>
    <div id="app">
        <!-- v-bind：abc 绑定子组件  把aaa的数据绑定在abc组件上 -->
        <student v-for="aaa in students" v-bind:abc="aaa"></student>
    </div>
    <!-- 1.声明组件 -->
    <template id="stu">
        <div>
          <p>{{abc.name}}</p>
          <p>{{abc.age}}</p>
        </div>
      </template>
    <script>
        // 2.注册组件
        Vue.component("student", {
                template: "#stu",
                //写法一
                //props:["abc"]//props是一个数组，在里面定义变量（属性），该变量的作用就是用来接收父组件传过来的数据

                //写法二
                //props:{ //props可以是一个对象，对象中指定子组件的属性
                //  abc: Object    //属性名: 属性类型
                //}

                //写法三
                //props里面支持多种类型：Object、Array、String、Number、Boolean、Date、Function
                props: {
                    abc: {
                        type: Object,
                        default () { //设置默认值，如果父组件没有传值则使用默认值   没有绑定传值
                            //也就是把 v-bind：abc干掉的情况下  防止在没有传值的时候页面显示依旧正常
                            return {
                                name: "学生名字",
                                age: "学生年龄"
                            }
                        }
                    }
                }
            })
            // 父组件
        new Vue({
            el: "#app",
            data: { //假设数据通过请求得到
                students: [{
                    name: "小强",
                    age: 10
                }, {
                    name: "小白",
                    age: 11
                }, {
                    name: "旺财",
                    age: 5
                }]
            }
        });
    </script>
</body>

</html>